<template>
  <div style="height: 3vh;background-color:#fff;padding:10px 20px;margin: 20px">
    <span style="line-height:60px;font-size:25px;float: left">企业信息</span>
    <el-button @click="logout" type="primary" color="#5B63B7"
               style="float:right;margin-top:13px;margin-right: 1%">退出登录</el-button>
    <el-button @click="UseCompany(userObject.id)" type="primary" color="#5B63B7" v-if="saveCompanyForm.status=='注销'"
               style="float:right;margin-top:13px;margin-right: 2%">启用公司</el-button>
    <el-button @click="deleteCompany(userObject.id)" type="primary" color="#5B63B7" v-if="saveCompanyForm.status!='注销'"
               style="float:right;margin-top:13px;margin-right: 2%">注销公司</el-button>
    <el-button @click="dialogVisibleHr=true" type="primary" color="#5B63B7"
               style="float:right;margin-top:13px;margin-right: 1%">新建Hr</el-button>
<!--    <el-button @click="dialogAddHr=true" type="primary" color="#5B63B7"-->
<!--               style="float:right;margin-top:13px;margin-right: 1%">绑定hr</el-button>-->
  </div>


  <el-card style="margin: 50px">
    <el-form :model="saveCompanyForm" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="公司名称">
            <el-input v-model="saveCompanyForm.corporateName" placeholder="请输入公司名称" :disabled="saveCompanyForm.status=='注销'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司规模">
            <el-select v-model="saveCompanyForm.companySize" placeholder="请选择公司规模" :disabled="saveCompanyForm.status=='注销'">
              <el-option
                  v-for="item in companySizes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="公司级别">
            <el-select placeholder="请选择公司级别" v-model="saveCompanyForm.corporateLevel" :disabled="saveCompanyForm.status=='注销'">
              <el-option
                  v-for="item in companyLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司地址">
            <el-input placeholder="请输入公司地址" v-model="saveCompanyForm.companyAddress" :disabled="saveCompanyForm.status=='注销'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="行业分类">
            <el-input placeholder="请输入行业分类" v-model="saveCompanyForm.industryClassification" :disabled="saveCompanyForm.status=='注销'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司管理密码">
            <el-input placeholder="请输入管理密码" v-model="saveCompanyForm.password" :disabled="saveCompanyForm.status=='注销'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="公司简介">
            <el-input type="textarea" v-model="saveCompanyForm.companyProfile" placeholder="请输入公司简介" :disabled="saveCompanyForm.status=='注销'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司状态">
            <el-input placeholder="请输入公司状态" v-model="saveCompanyForm.status" :disabled="saveCompanyForm.status=='注销'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
      <el-button type="primary" color="#5B63B7" @click="saveCompany()" style="float: right;margin: 0 30px 30px 0" :disabled="saveCompanyForm.status=='注销'">保存</el-button>
  </el-card>

  <!-- 新增招聘者弹窗 -->
  <el-dialog :title="dialogTitleHr" style="width:600px;padding:40px;" v-model="dialogVisibleHr" :before-close="handleCloseHr">
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="公司名称">
            <el-input placeholder="请输入公司名称" v-model="userObject.corporateName" :disabled="userObject.corporateName!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*职位">
            <el-input placeholder="请输入职位" v-model="saveHrForm.position" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*身份">
            <el-select placeholder="请选择身份" v-model="saveHrForm.identityId" >
              <el-option v-for="item in levelOption" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <el-input placeholder="请输入真实姓名" v-model="saveHrForm.realName" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*用户名">
            <el-input placeholder="请输入用户名" v-model="saveHrForm.username" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <el-input placeholder="请输入昵称" v-model="saveHrForm.nickname" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveHrForm.email" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*手机号">
            <el-input placeholder="请输入手机号" v-model="saveHrForm.phone" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*密码">
            <el-input placeholder="请输入密码" v-model="saveHrForm.password" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*微信号">
            <el-input placeholder="请输入微信号" v-model="saveHrForm.wechatId" :disabled="saveHrForm.identityId==10"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="saveHrForm.gender" :disabled="saveHrForm.identityId==10">
              <el-radio value="男" border style="margin: 0;">男</el-radio>
              <el-radio value="女" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button  @click="handleCloseHr()" style="color: #5B63B7;" class="custom-hover-color">取消</el-button>
      <el-button type="primary" color="#5B63B7" @click="saveHr(userObject.id)" :disabled="saveHrForm.identityId==10">保存</el-button>
    </template>
  </el-dialog>

<!--  绑定hr的弹窗-->
  <el-dialog :title="dialogTitleAddHr" style="width:600px;padding:40px;" v-model="dialogAddHr" :before-close="handleCloseAddHr">
    <a-row :gutter="24" style="margin-top:20px;">
      <a-col :span="12">
        <a-form-item field="hrId" label="hr的id">
          <a-input v-model="formState.hrId" placeholder="请输入hrId"/>
        </a-form-item>
      </a-col>
      <a-button type="primary" @click="addHr(formState.hrId)">查询</a-button>
    </a-row>
    <a-row :gutter="24" style="margin-top:20px;">
      <a-col :span="12">
        <el-text v-for="hrInfo in HrInfo">{{hrInfo.userName + ' ' + hrInfo.nickName}}<br></el-text>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top:20px;">
      <a-button type="primary" @click="submitAddHr()">提交</a-button>
    </a-row>
  </el-dialog>


  <!-- 招聘者信息表格 -->
  <el-card style="margin:50px;">
    <el-table :data="HrArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="corporateName" label="公司名称" align="center"/>
      <el-table-column prop="username" label="用户名" align="center"/>
      <el-table-column prop="phone" label="电话" align="center"/>
      <el-table-column prop="avgResponseTimeHours" label="平均回复候选人时间" align="center"/>
      <el-table-column prop="recentReplyCount" label="过去一周内回复候选人的次数" align="center"/>
      <el-table-column prop="position" label="职位" align="center"/>
      <el-table-column prop="examineState" label="审核状态" align="center"/>
      <el-table-column prop="status" label="用户状态" align="center"/>
      <el-table-column prop="password" label="密码" align="center"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editHr(scope.row.hrId)" style="color:#5B63B7" :disabled="scope.row.status == '注销'">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteHr(scope.row.hrId)" v-if="scope.row.status != '注销'" style="color:#5B63B7">注销</el-button>
          <el-button link type="primary" size="small" @click="useHr(scope.row.hrId)" v-else-if="scope.row.status == '注销'" style="color:#5B63B7">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const formState = ref({
  email:'',
  corporateName: '',
  corporateLevel:'',
  coverPhoto:'',
  companyAddress:'',
  companyProfile:'',
  companySize:'',
  industryClassification:'',
  photoShow:'',
  occupationPhoto:'',
  wechatId:'',
  hrId:'',
  hrIds:[],
});

const HrInfo = ref([
  {
    userId:'',
    nickName:'',
    userName:'',
  }
])

//添加hr
const addHr = (id) => {
  formState.value.hrIds.push(formState.value.hrId)
  formState.value.hrId = ''
  console.log("*****添加用户" + id)
  showHrInfo(id);
}

const showHrInfo = (id)=>{
  console.log("*******************调用后端显示用户信息")
  axios.get( BASE_URL + '/v1/addHr/selectUserInfo?id=' + id).then((response)=>{

    console.log("*******************!!!!")
    if (response.data.code == 2000){
      ElMessage.success("添加成功")
      HrInfo.value.push(response.data.data)
      console.log("***********HrInfo = " + HrInfo.value)
    }else {
      ElMessage.error("添加失败")
    }
  })
}

const submitAddHr = () => {
  let data = JSON.stringify(saveCompanyForm.value)
  axios.post(BASE_URL + '/v1/addHr/submitAddHr',data,{
    headers: {
      'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
    }
  }).then((response)=>{
    if (response.data.code == 2000){
      ElMessage.success("提交成功")
    }else {
      ElMessage.error("提交失败")
    }
  })
}

const levelOption = ref([
  {label: '求职者',value: '10'},
  {label: '招聘者',value: '20'},
])

const companySizes = ref([
  {label:'500以下',value:'500以下'},
  {label:'1000以下',value:'1000以下'},
  {label:'1500以下',value:'1500以下'},
  {label:'2000以下',value:'2000以下'},
  {label:'5000以下',value:'5000以下'},
  {label:'5000以上',value:'5000以上'}
])

const companyLevel = ref([
  {label:'上市公司',value:'上市公司'},
  {label:'非上市公司',value:'非上市公司'},
  {label:'行业龙头',value:'行业龙头'},
  {label:'中小企业',value:'中小企业'},
  {label:'国有企业',value:'国有企业'},
  {label:'民营企业',value:'民营企业'},
  {label:'外资企业',value:'外资企业'},
  {label:'制造业企业',value:'制造业企业'},
  {label:'服务业企业',value:'服务业企业'},
  {label:'科技型企业',value:'科技型企业'}
])

//控制绑定hr弹窗是否显示
const dialogAddHr = ref(false);
//控制新增用户弹窗是否显示
const dialogVisibleHr = ref(false);
//定义变量控制dialog的标题
const dialogTitleHr = ref('新建招聘者');
const dialogTitleAddHr = ref('添加hr');
//准备对象用来收集新增/修改员工的表单信息
const saveHrForm = ref({
  nickname:'',
  password:'',
  email: '',
  phone:'',
  realName:'',
  gender: '男',
  status:'',
  identityId:'',
  wechatId:'',
  userImg:'',

  hrId:'',
  companyId:'',
  username:'',
  corporateName:'',
  avgResponseTimeHours:'',
  recentReplyCount: '',
  position:'',
  examineState:'',
  recommend:'1',
  userId:'',
  createTime:'',
  updateTime:''
});
//控制新增用户弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新建公司');

const userData = localStorage.getItem("user");
const userObject = JSON.parse(userData);

//准备对象用来收集新增/修改员工的表单信息
const saveCompanyForm = ref({
  id:'userObject.id',
  corporateName:'',
  corporateLevel:'',
  coverPhoto: '',
  companySize:'',
  industryClassification:'',
  companyAddress:'',
  companyProfile:'',
  photoShow:'',
  createTime:'',
  updateTime:'',
  password:'',
  status:''
});

//定义数组用来装用户列表信息
const HrArr = ref([]);
const searchHrForm = ref({companyId:userObject.id});
const loadHr = () => {
  //如果传入了查询条件，则根据条件查询，没有条件，默认查询所有员工信息
  let data = qs.stringify(searchHrForm.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/hr/select?'+data).then((response) => {
    if (response.data.code === 2000) {
      HrArr.value = response.data.data;
      console.log(HrArr.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
//新增Hr
const saveHr = (id) => {
  dialogTitleHr.value = '新增员工';
  dialogVisibleHr.value = true;
      let data = JSON.stringify(saveHrForm.value);
      console.log(data);
      axios.post(BASE_URL + '/v1/hr/save/' + id, data, {
        headers: {
          'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
        }
      }).then((response) => {
        if (response.data.code === 2000) {
          ElMessage.success('保存成功!');
          dialogVisibleHr.value = false;
          saveHrForm.value = {};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
          loadHr();
        }
        else {
          ElMessage.error(response.data.msg);
        }
  })
}

//实现取消按钮的功能
const handleCloseHr = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisibleHr.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    saveHrForm.value={};
  }
}

const handleCloseAddHr = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogAddHr.value = false;
    //取消时把填的数据都清空，表单回复到初始状态

  }
}


//定义数组用来装用户列表信息
// const CompanyArr = ref([]);
//定义对象保存查询条件
const searchCompanyForm = ref({id:userObject.id});
const loadCompany = () => {
  //如果传入了查询条件，则根据条件查询，没有条件，默认查询所有员工信息
  let data = qs.stringify(searchCompanyForm.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/company/select?'+data).then((response) => {
    if (response.data.code === 2000) {
      saveCompanyForm.value = response.data.data[0];
      console.log(saveCompanyForm.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
 // 新增公司
const saveCompany = () => {
  let data = JSON.stringify(saveCompanyForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/company/save',data, {
    headers: {
      'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
    }
  }).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('保存成功!');
      dialogVisible.value = false;//关闭弹窗
      saveCompanyForm.value={};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
      loadCompany();//加载用户列表方法
      loadHr();
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//页面一加载立即调用
onMounted(() => {
  loadHr();
  loadCompany();
})

//编辑员工
const editHr = (hrId) =>{
  console.log(hrId);
  //修改弹窗标题并打开弹窗
  dialogTitleHr.value = '编辑员工';
  dialogVisibleHr.value = true;
  //根据id查询要修改的当前员工的信息
  axios.get(BASE_URL+'/v1/hr/select?hrId='+hrId).then((response) => {
    if (response.data.code === 2000) {
      saveHrForm.value = response.data.data[0];
      console.log(response.data.data)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//删除用户
const deleteHr = (hrId)=>{
  console.log(hrId);
  axios.post(BASE_URL+'/v1/hr/delete/'+hrId).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('已注销该用户!');
      loadHr();
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//启动用户
const useHr = (hrId)=>{
  console.log(hrId);
  axios.post(BASE_URL+'/v1/hr/use/'+hrId).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('启用成功!');
      loadHr();
    } else {
      ElMessage.error("失败");
    }
  })
}

//注销公司
const deleteCompany = (id)=>{
  console.log(id);
  if(confirm('您确认要注销企业吗?')){
    axios.post(BASE_URL+'/v1/company/delete/'+id).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('注销成功!');
        loadCompany();
        loadHr();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

const UseCompany = (id)=>{
  console.log(id);
  if(confirm('您确认要启用此公司吗?')){
    axios.post(BASE_URL+'/v1/company/use/'+id).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('启用成功!');
        loadCompany();
        loadHr();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//获取登录的用户信息
const user = ref(getUser());
//退出登录功能
const logout = () => {
  if(confirm('确定要退出吗？')){
    localStorage.removeItem('user');
    //退出时也需要将面包屑的值清空！
    localStorage.removeItem('breadcrumb');
    window.location.href = '/login';
    user.value = '';
  }
}
</script>

<style scoped>
.custom-hover-color:hover {
  color: #5B63B7; /* 悬停时的文本颜色 */
  background-color: #f5f5f5;
  border-color: #cccccc;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}
</style>